<template>
  <div class="company-detail">
    <el-row class="detail">
      <el-col :span="11">
        <gallery></gallery>
      </el-col>
      <el-col :span="13">
        <div class="row title-wrap">
          <div class="title">
            <b>凯发娱乐</b>
            <img :src="`${$baseImgUrl}company/guarantee_icon.png`"/>
          </div>
          <div class="btn-wrap">
            <span class="el-icon-edit-outline">评测</span>
            <span class="el-icon-s-home">官网</span>
          </div>
        </div>
        <div class="row">
          <div class="col">网址：</div>
          <div class="col">
            <span class="row-btn">网址</span>
            <span class="row-btn">k8体育</span>
          </div>
        </div>
        <div class="row">
          <div class="col">游戏平台：</div>
          <div class="col">
            <span class="row-btn">AG</span>
            <span class="row-btn">MG</span>
            <span class="row-btn">EA</span>
            <span class="row-btn">BBIN</span>
            <span class="row-btn">沙巴</span>
            <span class="row-btn">HG</span>
            <span class="row-btn">TTG</span>
          </div>
        </div>
        <div class="row">
          <div class="col">网址：</div>
          <div class="col">首存100元起，最高享受30%优惠</div>
        </div>
        <div class="row">
          <div class="col">返水：</div>
          <div class="col">1.2%</div>
        </div>
        <div class="row">
          <div class="col">优势：</div>
          <div class="col">英超顶级球队曼城与德甲豪门沙尔克04官方合作伙伴</div>
        </div>
        <div class="row">
          <div class="col">游戏：</div>
          <div class="col">
            <span class="row-btn">真人娱乐</span>
            <span class="row-btn">体育投注</span>
            <span class="row-btn">老虎机</span>
          </div>
        </div>
        <div class="row discounts">
          <div class="col">优惠：</div>
          <div class="col">
            <p>签到领金币 礼金兑不停</p>
            <p>【凯发娱乐】天天大赢家 连赢夺百万</p>
            <p>【凯发娱乐】彩票爆金 财运三重礼</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="detail detail-last">
      <el-col :span="11">
        <div class="row">
          <div class="col">博彩拍照：</div>
          <div class="col">
            <span class="row-btn">菲律宾</span>
          </div>
        </div>
      </el-col>
      <el-col :span="13">
        <div class="row">
          <div class="col">支付方式：</div>
          <div class="col">
            <span class="row-btn">在线支付</span>
            <span class="row-btn">银行电汇</span>
          </div>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="row">
          <div class="col">网站语言：</div>
          <div class="col">
            <span class="row-btn">简体中文</span>
            <span class="row-btn">繁体中文</span>
          </div>
        </div>
      </el-col>
      <el-col :span="13">
        <div class="row">
          <div class="col">客服语言：</div>
          <div class="col">
            <span class="row-btn">普通话</span>
          </div>
        </div>
      </el-col>
      <el-col>
        <div class="row">
          <div class="col">联系方式：</div>
          <div class="col">联系方式：400-0607277、400-080-277</div>
        </div>
      </el-col>
    </el-row>
    <certification></certification>
  </div>
</template>

<script>
import Gallery from './components/Gallery.vue';
import Certification from './components/Certification.vue';

export default {
  name: 'CompanyDetail',
  components: {
    Gallery,
    Certification
  },
  data() {
    return {
    };
  },
  created() {
    console.log(this.$route);
  }
};
</script>

<style lang="less" scoped>
  @import '../../less/global.less';
  @grayBgColor: #e6e6e6;
  .company-detail {
    .detail {
      border: 1px solid #ccc;
      &.detail-last {
        border: 0;
        border-right: 1px solid #ccc;
      }
    }
    .row {
      display: flex;
      align-items: center;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      color: #666;
      .col:first-child {
        flex: 0 0 100px;
        height: 100%;
        padding-right: 10px;
        text-align: right;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        background-color: @grayBgColor;
      }
      .col:last-child {
        padding: 10px;
      }
      .row-btn {
        margin-right: 10px;
        padding: 6px;
        background-color: @grayBgColor;
        border: 1px solid #aaa;
        border-radius: 3px;
      }
      &.discounts {
        height: 150px;
        max-height: 150px;
        overflow: hidden;
        border-bottom: 0;
        p {
          height: 30px;
          line-height: 30px;
        }
      }
    }
    .title-wrap {
      display: flex;
      align-items: center;
      padding: 0 10px;
      border-left: 1px solid #ccc;
      .title {
        b {
          font-size: 24px;
          margin-right: 10px;
        }
        img {
          margin-left: 5px;
          vertical-align: text-bottom;
        }
      }
      .btn-wrap {
        flex: 1;
        text-align: right;
        span {
          display: inline-block;
          margin-left: 10px;
          padding: 0 10px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          font-size: 16px;
          border-radius: 3px;
          background-color: @mainBgColor;
          color: #fff;
          cursor: pointer;
          &:hover {
            background-color: @mainBgHoverColor;
          }
          &::before {
            margin-right: 5px;
          }
        }
      }
    }
  }
</style>
